<template>
  <div>
    <DetailBanner :sightName="sightName" :bannerImg="bannerImg" :gallaryImg="gallaryImgs"></DetailBanner>
    <DetailHeader></DetailHeader>
    <DetailList :list="list"></DetailList>
    <!-- 撑开页面 -->
    <div class="content"></div>
  </div>
</template>
<script>
import DetailBanner from "./components/DetailBanner";
import DetailHeader from "./components/DetailHeader";
import DetailList from "./components/DetailList";
import axios from "axios";
export default {
  components: {
    DetailBanner,
    DetailHeader,
    DetailList
  },
  mounted() {
    this.getData();
  },
  data() {
    return {
      sightName: "",
      bannerImg: "",
      gallaryImgs: [],
      list: []
    };
  },
  methods: {
    getData() {
      axios
        .get("/api/detail.json?id=" + this.$route.params.id)
        .then(this.getDataSucc);
    },
    getDataSucc(res) {
      if (res.data.data && res.data.ret) {
        let data = res.data;
        this.sightName = data.data.sightName;
        this.bannerImg = data.data.bannerImg;
        this.gallaryImgs = data.data.gallaryImgs;
        // console.log(this.gallaryImgs)
        this.list = data.data.categoryList;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.content {
  height: 50rem;
}
</style>